import { ref } from 'vue'
import * as echarts from 'echarts'

export function useOrgActivityChart() {
  const orgActivityChart = ref(null)

  // 初始化图表的通用函数
  const initChart = (chartRef, option) => {
    if (!chartRef.value) return
    const chart = echarts.init(chartRef.value)
    chart.setOption(option)

    // 添加响应式调整
    window.addEventListener('resize', () => {
      chart.resize()
    })

    return chart
  }

  // 图表3：党组织活动统计 - 柱状图（同时显示活动数量和参与人数）
  const initOrgActivityChart = async (data) => {
    // 使用for拆分
    let organizationNames = [];
    let activityCounts = [];
    let participantCounts = [];
    for (let item of data) {
      organizationNames.push(item.organizationNames);
      activityCounts.push(item.activityCounts);
      participantCounts.push(item.participantCounts);
    }
    
    // 活动数量
    const variedActivityCounts = activityCounts

    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' },
        backgroundColor: 'rgba(0, 0, 0, 0.7)',
        borderColor: '#1890ff',
        textStyle: { color: '#fff' },
        formatter: (params) => {
          let result = params[0].name + '<br/>';
          params.forEach(param => {
            result += `${param.marker} ${param.seriesName}: ${param.value}<br/>`;
          });
          return result;
        }
      },
      legend: {
        data: ['活动数量', '参与人数'],
        textStyle: { color: '#fff' },
        top: '3%'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: organizationNames.map(name => name.length > 8 ? name.substring(0, 8) + '...' : name),
        axisLabel: { color: '#fff', fontSize: 10, rotate: 45 },
        axisLine: { lineStyle: { color: 'rgba(64, 158, 255, 0.3)' } }
      },
      yAxis: [
        {
          type: 'value',
          name: '活动数量',
          nameTextStyle: { color: '#fff', fontSize: 12 },
          axisLabel: { color: '#fff', fontSize: 11 },
          axisLine: { lineStyle: { color: '#52c41a' } },
          splitLine: { lineStyle: { color: 'rgba(64, 158, 255, 0.1)' } }
        },
        {
          type: 'value',
          name: '参与人数',
          nameTextStyle: { color: '#fff', fontSize: 12 },
          axisLabel: { color: '#fff', fontSize: 11 },
          axisLine: { lineStyle: { color: '#1890ff' } },
          splitLine: { show: false }
        }
      ],
      series: [
        {
          name: '活动数量',
          type: 'bar',
          data: variedActivityCounts,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#52c41a' },
              { offset: 1, color: '#389e0d' }
            ])
          },
          emphasis: {
            itemStyle: { color: '#73d13d' }
          },
          barWidth: '30%'
        },
        {
          name: '参与人数',
          type: 'bar',
          yAxisIndex: 1,
          data: participantCounts,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#1890ff' },
              { offset: 1, color: '#096dd9' }
            ])
          },
          emphasis: {
            itemStyle: { color: '#40a9ff' }
          },
          barWidth: '30%'
        }
      ]
    }

    initChart(orgActivityChart, option)
  }

  return {
    orgActivityChart,
    initOrgActivityChart
  }
}
